<template>
  <div id="invitationPolite">
    <h1 class="con-right-title">邀请有礼</h1>
    <topSearch @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="addEditCopy('add')">
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <el-table :data="tableData" max-height="550" v-loading="loading">
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="活动名称"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="inviteMatchingChannel.oneLevelChannelName"
        label="展翅一级入量渠道"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="inviteMatchingChannel.twoLevelChannelName"
        label="展翅二级入量渠道"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="状态" min-width="80" align="center">
        <template slot-scope="{ row }">
          <span>{{
            row.activityStatus | filterName('activity-status_invitation')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动时间" min-width="100" align="center">
        <template slot-scope="{ row }">
          <div>{{ row.startTime }}</div>
          至
          <div v-if="row.activityTimeType === 'SHORT_ACTIVITY'">
            {{ row.endTime }}
          </div>
          <div v-else>长期</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateBy.trueName"
        label="操作人"
        min-width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            v-if="row.activityStatus === 'NOT_STARTED'"
            @click="handleActivity('enable', row)"
          >
            开始
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus === 'ONGOING'"
            @click="handleActivity('disable', row)"
          >
            结束
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus !== 'OVER'"
            @click="addEditCopy('edit', row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus === 'ONGOING'"
            @click="handleActivity('promote', row)"
          >
            推广
          </el-button>
          <el-button type="text" @click="addEditCopy('copy', row)">
            一键复制
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus !== 'NOT_STARTED'"
            @click="handleActivity('viewData', row)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 查看数据 -->
    <promotion v-if="dialogData.isShow" :dialogData="dialogData"></promotion>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  getSearchList,
  activityEnable,
  activityDisable
} from '@/api/activityCenter/activityManage/inviteHaveGift'
import topSearch from './topSearch'
import promotion from '../common/promotion'
export default {
  components: { topSearch, promotion },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogData: { isShow: false }
    }
  },
  async mounted() {
    this.searchList()
    await sysNormalDisable(
      'activity-status_invitation',
      'activity-status_invitation'
    )
  },
  methods: {
    /* 列表 */
    searchList() {
      this.loading = true
      getSearchList(
        this.searchParams,
        (res) => {
          this.loading = false
          this.tableData = res.rows
          this.total = res.total
        },
        () => {
          this.loading = false
        }
      )
    },
    /* 搜索 */
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 新增 编辑 一键复制 */
    addEditCopy(type, row) {
      const obj = { name: 'wh:inviteHaveGift:edit', query: { type } }
      if (type !== 'add') obj.query.id = row.id
      this.$router.push(obj)
    },
    /* 开始 结束 推广 查看数据 */
    handleActivity(type, row) {
      switch (type) {
        case 'enable':
          activityEnable(row.id, {}, () => {
            this.$message.success('活动开始成功')
            this.searchList()
          })
          break
        case 'disable':
          activityDisable(row.id, {}, () => {
            this.$message.success('活动结束成功')
            this.searchList()
          })
          break
        case 'promote':
          this.dialogData = {
            isShow: true,
            url: row.activityUrl
          }
          break
        case 'viewData':
          const query = { id: row.id }
          this.$router.push({ name: 'wh:inviteHaveGift:detail', query })
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
